<template>
  <view class="content">
    <!-- 用户信息 -->
    <view class="info flex flex-y-center bg-white" v-if="state.dataSource">
      <image v-if="state.dataSource.avatar" class="avatar" :src="state.dataSource.avatar" mode="aspectFit"></image>
      <image v-else class="avatar" src="../../static/box.png" mode="aspectFit"></image>
      <view class="text">
        <view class="fz40">{{state.dataSource.wechatName}}</view>
        <view class="mt30 fz32 gray6">
          联系方式：{{state.dataSource.wechatMobile}}
          <sw-icons class="ml20 pointer" icon="icon-bianji" color="#008afe" size="40" @click="proxy.$jump.navigateTo('/pages/user/info')"></sw-icons>
        </view>
      </view>
    </view>

    <!-- adv -->
    <view class="adv"><image class="img" src="../../static/user.jpg"></image></view>

    <!-- 列表 -->
    <view class="ui-list bg-white fz30">
      <view class="item flex flex-y-center" @click="proxy.$jump.navigateTo('/pages/user/order')">
        <sw-icons class="mr20" icon="icon-dingdan" color="#008afe" size="40"></sw-icons>
        <view class="flex1">我的订单</view>
        <sw-icons icon="icon-arrow-right" color="#008afe" size="30"></sw-icons>
      </view>
      <view class="item flex flex-y-center" @click="proxy.$jump.navigateTo('/pages/user/withdraw')">
        <sw-icons class="mr20" icon="icon-yue" color="#008afe" size="40"></sw-icons>
        <view class="flex1">余额退款</view>
        <sw-icons icon="icon-arrow-right" color="#008afe" size="30"></sw-icons>
      </view>
<!--      <view class="item flex flex-y-center" @click="proxy.$jump.navigateTo('/pages/user/cooperate')">
        <sw-icons class="mr20" icon="icon-hezuo" color="#008afe" size="40"></sw-icons>
        <view class="flex1">商务合作</view>
        <sw-icons icon="icon-arrow-right" color="#008afe" size="30"></sw-icons>
      </view> -->
 <!--     <view class="item flex flex-y-center" @click="proxy.$jump.navigateTo('/pages/user/help')">
        <sw-icons class="mr20" icon="icon-bangzhu" color="#008afe" size="40"></sw-icons>
        <view class="flex1">使用帮助</view>
        <sw-icons icon="icon-arrow-right" color="#008afe" size="30"></sw-icons>
      </view> -->
 <!--     <view class="item flex flex-y-center" @click="proxy.$jump.navigateTo('/pages/user/complain')">
        <sw-icons class="mr20" icon="icon-tousu" color="#008afe" size="40"></sw-icons>
        <view class="flex1">投诉&建议</view>
        <sw-icons icon="icon-arrow-right" color="#008afe" size="30"></sw-icons>
      </view> -->
      <view class="item flex flex-y-center" @click="proxy.$jump.navigateTo('/pages/user/about')">
        <sw-icons class="mr20" icon="icon-guanyu" color="#008afe" size="40"></sw-icons>
        <view class="flex1">关于我们</view>
        <sw-icons icon="icon-arrow-right" color="#008afe" size="30"></sw-icons>
      </view>
      <view class="item flex flex-y-center" @click="clearStorage">
        <sw-icons class="mr20" icon="icon-qingli" color="#008afe" size="40"></sw-icons>
        <view class="flex1">清理缓存</view>
        <sw-icons icon="icon-arrow-right" color="#008afe" size="30"></sw-icons>
      </view>
    </view>
    <filings-modal></filings-modal>
  </view>
</template>

<script setup>
import filingsModal from '@/components/filings/index.vue';
import { ref, reactive, getCurrentInstance } from 'vue';
import { queryUserById } from '@/common/js/getData.js';
import { onLoad } from '@dcloudio/uni-app';

const { proxy } = getCurrentInstance();

const state = reactive({
  dataSource: {}
});

// 页面加载完成
onLoad(async () => {
  await proxy.$onLaunched;
  loadData(1);
});

// 获取数据
const loadData = page => {
  queryUserById().then(res => {
    state.dataSource = res.result
  })
};

// 清除缓存
const clearStorage = () => {
  uni.clearStorage();
  uni.showToast({
    title: '清理成功'
  });
};
</script>

<style lang="less" scoped>
.info {
  padding: 90rpx 30rpx;
  .avatar {
    width: 120rpx;
    height: 120rpx;
    margin-right: 35rpx;
    border-radius: 50%;
  }
}

.adv {
  .img {
    width: 100%;
    height: 251rpx;
  }
}

.ui-list {
  margin: 30rpx 0;
  .item {
    padding: 30rpx;
    border-bottom: 2rpx solid #eee;
    &:last-of-type {
      border-bottom: none;
    }
  }
}
</style>
